<template>
    <fieldset>
        <legend>Product</legend>
        <button @click="FETCH_PRODUCT">点击获取购物车数据</button>
        <h1>{{ name }}</h1>
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>{{ item.title }}</b>
                ---
                <b>价格:{{ item.price }}</b>
                ---
                <b>库存:{{ item.inventory }}</b>
                --
                <button @click="addToCart(item.id)">+加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex"
export default {
    created() {
        this.FETCH_PRODUCT()
    },
    computed: {
        ...mapState("product", ['name', 'products'])
    },
    methods: {
        //映射product模块化store的actions
        ...mapActions("product", ['FETCH_PRODUCT']),
        //映射cart模块store的mutations
        ...mapMutations('cart', ['ADD_CART']),
        //映射cart中的actions
        ...mapActions('cart', ['SET_CARTS']),
        addToCart(product_id) {
            this.SET_CARTS(product_id)
        }
    }
}
</script>
<style scoped>
li {
    margin: 10px 0;
}
</style>